<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>链接分日数据</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  <style>
    .layuiadmin-big-font{
      font-size: 25px !important;
      line-height: 25px !important;
    }
    /**
      * 数据表格总高
      */
    .layui-table-body .layui-table-cell {
      height: 110px;
      line-height: 110px;
    }
  </style>
</head>
<body>

  <div class="layui-fluid">


    <div class="layui-row layui-col-space15">
      <div class="layui-col-sm12 layui-col-md12">

        <div class="layui-card">



          <blockquote class="layui-elem-quote">
            <fieldset class="layui-elem-field layui-field-title">
              <legend>[{$link.id}] {$link.name}</legend>
            </fieldset>
            <div class="layui-text">
              <ul>
                <li>新用户：当日注册的用户</li>
                <li>新归属用户：当日注册或当日从其他链接切过来的用户</li>
              </ul>
            </div>
          </blockquote>

          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
              </colgroup>
              <thead>
              <tr>
                <th>日期</th>
                <th>点击人数</th>
                <th>充值金额</th>
                <th>新用户</th>
                <th>付费人数</th>
                <th>新用户充值</th>

              </tr>
              </thead>
              <tbody>

              <tr>
                <td>今日</td>
                <td>
                  <div style="line-height: 43px;">
                    <p>{$todayData.click_uv}</p>
                    <p>新用户占比：{$todayData.new_fan_ratio}%</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 27px;">
                    <p>{$todayData.recharge_money}</p>
                    <p>新用户充值占比：{$todayData.newmoney_ratio}%</p>
                    <p>新归属用户充值占比：{$todayData.newgs_ratio}%</p>
                    <p>付费成功率：{$todayData.ffcg_ratio}%</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 27px;">
                    <p>{$todayData.new_fan_num}</p>
                    <p>加桌用户：{$todayData.jiazhuo_num}</p>
                    <p>加桌率：{$todayData.jiazhuo_ratio}%</p>
                    <p>付费率：{$todayData.new_pay_ratio}%</p>
                  </div>
                </td>

                <td>
                    <div style="line-height: 35px;">
                      <p>{$todayData.pay_uv}</p>
                      <p>充值笔数：{$todayData.recharge_count}</p>
                      <p>人均充值金额：{$todayData.rj_money}</p>
                    </div>
                </td>

                <td>
                    <div style="line-height: 60px;">
                      <p>新用户充值：{$todayData.new_user_money}</p>
                      <p>新归属用户充值：{$todayData.new_gs_money}</p>
                    </div>
                </td>
              </tr>

              <tr>
                <td>昨日</td>
                <td>
                  <div style="line-height: 43px;">
                    <p>{$todayData.click_uv}</p>
                    <p>新用户占比：{$yesterdayData.new_fan_ratio}%</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 27px;">
                    <p>{$yesterdayData.recharge_money}</p>
                    <p>新用户充值占比：{$yesterdayData.newmoney_ratio}%</p>
                    <p>新归属用户充值占比：{$yesterdayData.newgs_ratio}%</p>
                    <p>付费成功率：{$yesterdayData.ffcg_ratio}%</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 27px;">
                    <p>{$yesterdayData.new_fan_num}</p>
                    <p>加桌用户：{$yesterdayData.jiazhuo_num}</p>
                    <p>加桌率：{$yesterdayData.jiazhuo_ratio}%</p>
                    <p>付费率：{$yesterdayData.new_pay_ratio}%</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 35px;">
                    <p>{$yesterdayData.pay_uv}</p>
                    <p>充值笔数：{$yesterdayData.recharge_count}</p>
                    <p>人均充值金额：{$yesterdayData.rj_money}</p>
                  </div>
                </td>

                <td>
                  <div style="line-height: 60px;">
                    <p>新用户充值：{$yesterdayData.new_user_money}</p>
                    <p>新归属用户充值：{$yesterdayData.new_gs_money}</p>
                  </div>
                </td>
              </tr>

              </tbody>
            </table>

          </div>
        </div>
      </div>


      <div class="layui-col-sm12">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-sm12">
            <div class="layui-card">

              <div class="layui-card-header">每日数据（只保存有数据的日期）</div>
              <div class="layui-card-body">
                <table id="LAY-user-back-role" lay-filter="LAY-user-back-role"></table>
                <script type="text/html" id="clickTpl">
                  <div style="line-height: 60px;">
                    <p>{{d.click_uv}}</p>
                    <p>新用户占比：{{d.new_fan_ratio}}%</p>
                  </div>
                </script>

                <script type="text/html" id="moneyTpl">
                  <div style="line-height: 27px;">
                    <p>{{d.recharge_money}}</p>
                    <p>新用户充值占比：{{d.newmoney_ratio}}%</p>
                    <p>新归属用户充值占比：{{d.newgs_ratio}}%</p>
                    <p>付费成功率：{{d.ffcg_ratio}}%</p>
                  </div>
                </script>

                <script type="text/html" id="newFanTpl">
                  <div style="line-height: 27px;">
                    <p>{{d.new_fan_num}}</p>
                    <p>加桌用户：{{d.jiazhuo_num}}</p>
                    <p>加桌率：{{d.jiazhuo_ratio}}%</p>
                    <p>付费率：{{d.new_pay_ratio}}%</p>
                  </div>
                </script>


                <script type="text/html" id="payuvTpl">
                  <div style="line-height: 35px;">
                    <p>{{d.pay_uv}}</p>
                    <p>充值笔数：{{d.recharge_count}}</p>
                    <p>人均充值金额：{{d.rj_money}}</p>
                  </div>
                </script>


                <script type="text/html" id="newTpl">
                  <div style="line-height: 60px;">
                    <p>新用户充值：{{d.new_user_money}}</p>
                    <p>新归属用户充值：{{d.new_gs_money}}</p>
                  </div>
                </script>



              </div>
            </div>
          </div>
        </div>
      </div>
        
      </div>
    </div>
  </div>
  
  <script src="/static/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'sample','table'],function () {
    var $ = layui.$
            , form = layui.form
            , admin = layui.admin
            , table = layui.table;

    form.on('submit(LAY-user-back-search)', function (data) {
      var field = data.field;

      //执行重载
      table.reload('LAY-user-back-role', {
        where: field
      });
    });


    table.render({
      elem: '#LAY-user-back-role'
      , url: '/spread/linkDaily?id={$id}' //模拟接口
      , even: true
      , cellMinWidth: 150
      , response: {
        statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
      }
      , page: true //开启分页
      , cols: [
        [{field: 'report_date', title: '日期'}
          , {field: 'click_uv', title: '点击人数',templet:"#clickTpl"}
          , {field: 'recharge_money', title: '充值金额',templet:"#moneyTpl"}
          , {field: 'new_fan_num', title: '新用户',templet:"#newFanTpl"}
          , {title: '付费人数',templet:"#payuvTpl"}
          , {title: '新用户充值',templet:"#newTpl"}
        ]]
    });

  });
  </script>
</body>
</html>